import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as routeActions from 'react-router-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import './index.scss';

class Navigation extends React.PureComponent {
  static propTypes = {
    config: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string,
        key: PropTypes.string,
      })).isRequired,
    defaultKey: PropTypes.string,
  }
  static defaultProps = {
    defaultKey: '',
  }
  constructor(props) {
    super(props);

    const locationBeforeTransitions = props.locationBeforeTransitions;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();

    this.state = {
      selectedKey: navPath.length > 1 && navPath[1] ? navPath[1] : props.defaultKey,
    };
    this.clickHandle = ::this.clickHandle;
  }
  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
    const locationBeforeTransitions = nextProps.locationBeforeTransitions;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();

    this.setState({
      selectedKey: navPath.length > 1 && navPath[1] ? navPath[1] : nextProps.defaultKey,
    });
  }
  clickHandle(key) {
    const { dispatch, locationBeforeTransitions } = this.props;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();
    this.setState({ selectedKey: key }, () => {
      dispatch(routeActions.push(`/${navPath[0]}/${key}`));
    });
  }
  render() {
    const { config } = this.props;
    const { selectedKey } = this.state;
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    const tabLen = config.length;
    const top = `${(768 - ((tabLen - 1) * 121) - 143) / 2}px`;
    if (isVertical) {
      return (
        <div className="v-navigation-container" key="vertical" >
          {config.length > 0 && config.map(item =>
            <div
              className={`navigation-item ${selectedKey === item.key ? 'selected-navigation-item' : ''}`}
              key={item.key}
              onClick={this.clickHandle.bind(this, item.key)}
            >
              {item.name}
            </div>
          )
          }
        </div>
      );
    }
    return (
      <div className="navigation-container" key="horizon">
        <div className="navigation-wrapper" style={{ top }}>
          {
            config.length > 0 && config.map(item => (
              <div
                className={`${selectedKey === item.key ? 'item-active' : 'item-normal'} item`}
                key={item.key}
                onClick={this.clickHandle.bind(this, item.key)}
              >
                <span className="label">
                  {item.name}
                </span>
              </div>
            ))
          }
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer,
  };
}

export default connect(mapStateToProps)(Navigation);
